import React from 'react';
import { Modal, Button,} from 'antd';
import './index.css'
import { Input ,Select} from 'antd';
import { connect } from 'react-redux'
import { DatePicker } from 'antd';

import {huoZhongList,diDianClassList,huoZhuList,TransportAddClass2} from '../../redux/transportClass/transportClass'
const Option = Select.Option;
const { RangePicker } = DatePicker;

@connect(
    state => state,
    {huoZhongList,diDianClassList,huoZhuList,TransportAddClass2}
)
export default class AddTransport extends React.Component {
    constructor(){
        super();
        
    }

    onAdd(){
        let jhBIanhao = document.getElementById('jhBIanhao').value
        let dunwei = document.getElementById('dunwei').value
        this.props.TransportAddClass2(jhBIanhao,'1','1','1','2',dunwei,'2018-11-02 12:09:09','10','2018-11-03 12:09:09','10',)
    }
    onChange(){

    }
    handleChange(){

    }
    onOk(){

    }
    render() {
        console.log(this.props.transport.goodsList)
        let goodsList = this.props.transport.goodsList;
        let logisticsList = this.props.transport.logisticsList;
        let huoZhuList = this.props.transport.huoZhuList;

        return (
            <Modal
              title="新增运输计划"
              visible={this.props.visible}
              onOk={this.handleOk}
              footer={null}
              wrapClassName="submiss"
              onCancel={()=>this.props.showModel()}
            >
            <div style={{width:'100%',margin:'0 auto',textAlign:'center'}}>
             <div style={{width:'300px',margin:'0 auto',textAlign:'center'}}>
               计划编号: <Input id='jhBIanhao' placeholder="必填" style={{width:200}}/>
               </div>
               <div style={{width:'300px',margin:'0 auto',textAlign:'center',paddingTop:'20px'}}>
               选择货种:<Select defaultValue="请选择" style={{ width: 200 }} onChange={this.handleChange}>
                            {
                                JSON.stringify(goodsList) == '{}' || !goodsList ?'':
                                goodsList.map((item,index)=>
                                   <Option value={index}>{item.goodsName}</Option>
                                )
                            }
                        </Select>
               </div>
               <div style={{width:'300px',margin:'0 auto',textAlign:'center',paddingTop:'20px'}}>
               装货地:<Select defaultValue="请选择" style={{ width: 130 }} onChange={this.handleChange}>
                            {
                                JSON.stringify(logisticsList) == '{}' || !logisticsList ?'':
                                logisticsList.map((item,index)=>
                                   <Option value={index}>{item.logisticsName}</Option>
                                )
                            }
                        </Select>
                        <Button type="primary" style={{marginLeft:'10px'}}>新增</Button>
               </div>
               <div style={{width:'300px',margin:'0 auto',textAlign:'center',paddingTop:'20px'}}>
               卸货地:<Select defaultValue="请选择" style={{ width: 130 }} onChange={this.handleChange}>
                            {
                                JSON.stringify(logisticsList) == '{}' || !logisticsList ?'':
                                logisticsList.map((item,index)=>
                                   <Option value={index}>{item.logisticsName}</Option>
                                )
                            }
                        </Select>
                        <Button type="primary" style={{marginLeft:'10px'}}>新增</Button>
               </div>
               <div style={{width:'300px',margin:'0 auto',textAlign:'center',paddingTop:'20px'}}>
               计划吨位: <Input id='dunwei' placeholder="必填" style={{width:200}}/>
               </div>
               <div style={{width:'300px',margin:'0 auto',textAlign:'center',paddingTop:'20px'}}>
               选择货主:<Select defaultValue="请选择" style={{ width: 200 }} onChange={this.handleChange}>
                            {
                                JSON.stringify(huoZhuList) == '{}' || !huoZhuList ?'':
                                huoZhuList.map((item,index)=>
                                   <Option value={index}>{item.huoZhuName}</Option>
                                )
                            }
                        </Select>
               </div>
               <div style={{width:'300px',margin:'0 auto',textAlign:'center'}}>
               计划开始时间:    <DatePicker
                                showTime
                                format="YYYY-MM-DD HH:mm:ss"
                                placeholder="Select Time"
                                onChange={this.onChange.bind(this)}
                                onOk={this.onOk.bind(this)}
                                />
               </div>
               <div style={{width:'300px',margin:'0 auto',textAlign:'center'}}>
               计划结束时间: <DatePicker
                                showTime
                                format="YYYY-MM-DD HH:mm:ss"
                                placeholder="Select Time"
                                onChange={this.onChange.bind(this)}
                                onOk={this.onOk.bind(this)}/>
               </div>
               
               <div style={{paddingBottom:20,paddingTop:20}}><Button onClick = {this.onAdd.bind(this)} type="primary">立即提交</Button></div>
             
             </div>
            </Modal>
        );
    }
}